import { StyleSheet, Text, View, TouchableOpacity, Image, Modal } from 'react-native';
import React, { useState } from 'react';
import { Picker } from '@react-native-picker/picker';
import { useRoute } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import { NavBarHeader } from '~/components';
import { px2dp, scale } from '~/utils/px2dp';
import { setBleTime } from '~/utils/ble/application';
import { deviceStore, webSocketStore } from '~/store';

export default function BlePointerBy05T() {
    const router = useRoute();
    const { t } = useTranslation();
    const [btnStatus, setBtnStatus] = useState(0);
    const [visible, setVisible] = useState(false);
    const [selectedHour, setSelectedHour] = useState('00');
    const [selectedMinute, setSelectedMinute] = useState('00');
    const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
    const minutes = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
    const { linkSubDeviceStatus } = webSocketStore;

    const handleConfirm = () => {
        setBtnStatus(1);
        setBleTime({ type: 1, hour: selectedHour, minute: selectedMinute }, router.params);
        setVisible(false);
    };
    const onPress = () => {
        if (linkSubDeviceStatus == 0 && deviceStore.device.connectedDeviceStatus == 0) {
            Toast.show({ content: t('BlePointerBy05T.t13') });
            return;
        }
        setBleTime({ type: 0, value: 5 }, router.params);
    };
    return (
        <View style={styles.container}>
            <NavBarHeader title={t('BlePointerBy05T.title')} />
            <View style={styles.content}>
                <View style={styles.tipText}>
                    <Text style={styles.subText}>{t('BlePointerBy05T.t1')}</Text>
                    <Text style={styles.yetColor}>{t('BlePointerBy05T.t2')}</Text>
                    <Text style={styles.subText}>{t('BlePointerBy05T.t3')}</Text>
                    <Text style={styles.yetColor}>{t('BlePointerBy05T.t4')}</Text>
                    <Text style={styles.yetColor}>{t('BlePointerBy05T.t5')}</Text>
                    <Text style={styles.subText}>{t('BlePointerBy05T.t6')}</Text>
                </View>
                <View style={styles.child}>
                    <TouchableOpacity
                        style={styles.select}
                        activeOpacity={1}
                        onPress={() => {
                            if (linkSubDeviceStatus == 0 && deviceStore.device.connectedDeviceStatus == 0) {
                                Toast.show({ content: t('BlePointerBy05T.t13') });
                                return;
                            }
                            setVisible(true);
                        }}>
                        <Image
                            source={require('~/assets/deviceTools/point.png')}
                            style={styles.pointImg}
                            resizeMode={'contain'}
                        />
                        <Text style={styles.pointText}>
                            {btnStatus == 1 ? selectedHour + ':' + selectedMinute : t('BlePointerBy05T.t7')}
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={[styles.child, styles.tidyContent]}>
                    <View>
                        <Text style={styles.subText}>{t('BlePointerBy05T.t8')}</Text>
                    </View>
                    <TouchableOpacity style={styles.select1} onPress={onPress}>
                        <Image
                            source={require('~/assets/deviceTools/addPointer.png')}
                            resizeMode="cover"
                            style={styles.pointImg}
                        />
                        <Text style={[styles.pointText, { color: '#fff' }]}>{t('BlePointerBy05T.t9')}</Text>
                    </TouchableOpacity>
                </View>
            </View>
            <Modal visible={visible} transparent animationType="slide">
                <View style={styles.modalBackground}>
                    <View style={styles.modalContainer}>
                        <Text style={styles.title}>{t('BlePointerBy05T.t10')}</Text>
                        <View style={styles.pickerContainer}>
                            <Picker
                                selectedValue={selectedHour}
                                style={styles.picker}
                                onValueChange={(itemValue) => setSelectedHour(itemValue)}>
                                {hours.map((hour) => (
                                    <Picker.Item key={hour} label={hour} value={hour} />
                                ))}
                            </Picker>
                            <Text style={styles.separator}>:</Text>
                            <Picker
                                selectedValue={selectedMinute}
                                style={styles.picker}
                                onValueChange={(itemValue) => setSelectedMinute(itemValue)}>
                                {minutes.map((minute) => (
                                    <Picker.Item key={minute} label={minute} value={minute} />
                                ))}
                            </Picker>
                        </View>
                        <View style={styles.buttonRow}>
                            <TouchableOpacity onPress={() => setVisible(false)}>
                                <Text style={styles.cancelText}>{t('BlePointerBy05T.t11')}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={handleConfirm}>
                                <Text style={styles.submit}>{t('BlePointerBy05T.t12')}</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </Modal>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    content: {
        flex: 1,
        padding: px2dp(24),
    },
    tipText: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        flexWrap: 'wrap',
    },
    yetColor: {
        color: '#79a2fe',
        fontSize: scale(28),
        lineHeight: px2dp(40),
    },
    subText: {
        color: '#111111',
        fontSize: scale(28),
        lineHeight: px2dp(40),
    },
    pointImg: {
        width: px2dp(40),
        height: px2dp(40),
    },
    child: {
        marginTop: px2dp(24),
    },
    pointText: {
        fontSize: scale(28),
        color: '#666666',
        paddingLeft: px2dp(12),
    },
    select: {
        height: px2dp(88),
        borderColor: '#82a9fd',
        borderWidth: 1,
        borderRadius: px2dp(16),
        justifyContent: 'flex-start',
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: px2dp(24),
    },
    tidyContent: {
        marginTop: px2dp(64),
    },
    select1: {
        height: px2dp(88),
        backgroundColor: '#6B9EFE',
        borderRadius: px2dp(16),
        justifyContent: 'flex-start',
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: px2dp(24),
        paddingLeft: px2dp(24),
        borderColor: '#5A8EFF',
        borderWidth: 1,
    },
    modalBackground: {
        flex: 1,
        justifyContent: 'flex-end',
        backgroundColor: 'rgba(0,0,0,0.5)',
    },
    modalContainer: {
        backgroundColor: 'white',
        paddingBottom: '10%',
        padding: px2dp(24),
        borderTopLeftRadius: 12,
        borderTopRightRadius: 12,
    },
    title: {
        fontSize: scale(32),
        textAlign: 'center',
        marginBottom: px2dp(24),
    },
    pickerContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    picker: {
        flex: 1,
    },
    separator: {
        fontSize: scale(28),
        marginHorizontal: px2dp(24),
    },
    buttonRow: {
        marginTop: px2dp(64),
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    cancelText: {
        fontSize: scale(30),
    },
    submit: {
        fontSize: scale(32),
        color: '#5A8EFF',
        fontWeight: 'bold',
    },
});
